<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>添加删除记录练习</title>
	<link rel="stylesheet" type="text/css" href="css/exer_2.css" />
	<script type="text/javascript">

		window.onload = function () {

			/*
			 * 点击超链接以后，删除一个员工的信息
			 */

			//获取所有额超链接
			var allA = document.getElementsByTagName("a");

			//为每个超链接都绑定一个单击响应函数
			for (var i = 0; i < allA.length; i++) {
				/*
				 * for循环会在页面加载完成之后立即执行，
				 * 	而响应函数会在超链接被点击时才执行
				 * 当响应函数执行时，for循环早已执行完毕
				 */

				alert("for循环正在执行" + i);

				allA[i].onclick = function () {

					alert("响应函数正在执行" + i);

					//alert(allA[i]);

					return false;
				};

			}

		};


	</script>
</head>

<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">

		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>

</html>